<template>
 <div>
 <el-form :model="UpdataruleForm" :rules="rules" ref="UpdataruleForm" label-width="100px">
   <el-form-item  prop="oldpassword" label='原密码'>
    <el-input v-model="UpdataruleForm.oldpassword" label='原密码'></el-input>
  </el-form-item >
  <el-form-item prop="newpassword" label='新密码'>
    <el-input v-model="UpdataruleForm.newpassword" type='password' placeholder="新密码"></el-input>
  </el-form-item>
  <el-form-item prop="repassword" label='确认密码'>
    <el-input type='password' v-model="UpdataruleForm.repassword" placeholder="确认密码"></el-input>
  </el-form-item>
   </el-form>
   <div>
    <el-button type='primary' @click="submitForm">提交修改</el-button>
     <el-button  @click="resetForm">重置</el-button>
   </div>
 </div>
</template>

<script>
import {updatepwd} from '@/api/http'
export default {
data() {
    const samePwdFn = (rule,value,callback) => {
         if(value !== this.UpdataruleForm.newpassword){
            callback(new Error('两次输入的密码不一致！'))
         }else{
            callback()
         }
    }
    return {
        UpdataruleForm:{
            newpassword:'',
            oldpassword:'',
            repassword:'',

        },
        rules: {
          
          oldpassword: [
            { required: true, message: '请原密码', trigger: 'blur' },
           
           {
            pattern:/^\S{6,15}$/,
            message: '密码必须是6-15的非空字符串',
             trigger: 'blur'

           }
          ],
          newpassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
           
           {
            pattern:/^\S{6,15}$/,
            message: '密码必须是6-15的非空字符串',
             trigger: 'blur'

           }
          ],
          repassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            {
            pattern:/^\S{6,15}$/,
            message: '密码必须是6-15的非空字符串',
             trigger: 'blur'
           },
           {validator: samePwdFn,  trigger: 'blur'},
          ],
        },
    }

},
methods: {
    submitForm () {
        this.$refs.UpdataruleForm.validate(async (valid) => {
          if (valid) {
            alert('submit!');
          
            const res = await  updatepwd({
              
              old_pwd:this.UpdataruleForm.oldpassword,
              new_pwd:this.UpdataruleForm.newpassword,
              re_pwd:this.UpdataruleForm.repassword,
               
            })
            console.log(res)
            if(res.data.code===0){
                this.$message.success('密码修改成功')
                this.$store.dispatch('getuserinfo')
                this.$router.push('/login')
            }

            else{this.$message.error('编辑用户失败')}
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm() {
        this.$refs.UpdataruleForm.resetFields();
      },
}
}
</script>

<style>

</style>